<template>
	<view class="d_f w_100 j_c_c" :style="{backgroundColor:bagc,fontSize:fSize+'rpx' }">
		<view class="d_f j_c_s_b" 
			
			:style="{width: width+'%',height:navHeight+'rpx',lineHeight:navHeight+'rpx'}">
			<view v-for="(item,index) in navData" :key="index">
				<text @tap="clickList(index)" :style="index==count?`color:${clickColor}`:''">{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count:0,
			}
		},
		props:{
			navData:{
				type:Array,
				default:[]
			},
			width:{
				type:[Number,String],
				default:70
			},
			navHeight:{
				type:[Number,String],
				default:100
			},
			clickColor:{
				type:[String],
				default:"green"
			},
			bagc:{
				type:[String],
				default:"#ffffff"
			},
			fSize:{
				type:[Number,String],
				default:30
			}
		},
		methods: {
			clickList(index){
				this.$emit('navClick',index)
				this.count=index;
			}
		}
	}
</script>

<style>
.{
	
	font-size: calc();
	
}
</style>
